/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, TouchableHighlight } from 'react-native';
import { Icon } from 'antd-mobile-rn';

// project
import {
    Page, Content, Header, Between, ItemX, ItemY, Text, Image, TouchOpacity
} from '../../../../library'

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

 export default class UserProtocol extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor(props) {
        super(props);
        this.Nav = this.props.navigation;

        /**
         * state
         */
        this.state = {
            // 车辆列表变量
            carList:[],
        };

    }

    /**
     * didMount
     */
    componentDidMount(){
        // http请求
        HttpTemp.get({
            url:"/page/mycar/list.php",
            success:(res) => {
                let data = res.data;
                this.setState({
                    carList:data,
                })
            }
        })

    }




    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render(){
        return(
            <Page>

                <Content bg='rgba(248, 248, 248, 1)' mt='48'>

                    {/* 如果车辆列表为空的话，显示一张空页图片 */}
                    <View style={[ this.state.carList.length != 0 ? { display:"none"} : { } ]}>
                        <ItemY x="cener"> 
                            <TouchableHighlight
                                onPress={ ()=>{ 
                                    this.Nav.navigate('UserSettingCarAdd', {id: this.props.id});
                                 } }
                            >
                                <Image 
                                    mt="100"
                                    width="200"
                                    source={ require("../../../../assets/nomycar.png") }
                                />
                            </TouchableHighlight>
                        </ItemY>
                    </View>

                    {/* 如果车辆列表不为空的话，显示我的车辆 */}
                    <View style={[this.state.carList.length == 0 ? { display:"none"} : { } ]}>


                    {this.state.carList.map((item,index)=>{
                        return(
                            <ItemX h="50" mt="10" bg="white" y="center"> 
                                <View style={{ flex:0.05 }}></View>
                                    <Text size='17' f="1">{ item.set_number }</Text>
                                    <Icon type='right' size='md' color='#999' f="1"/>
                                <View style={{ flex:0.05 }}></View>
                            </ItemX>

                        )
                    })}

                        
                    </View>
                    
                </Content>

                {/* 顶部 star */}
                <Header h='48' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <Between px='10'>
                        <TouchOpacity active={0.6} onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </TouchOpacity>

                        <Text size='17'>我的车辆</Text>
                        <Text> </Text>
                    </Between>
                </Header>
                {/* 顶部 star */}

            </Page>
        )
    }
}

